<template>
  <div>
    <div class="topSearch">
      <div class="title">
        <span
            style="
            width: 3px;
            height: 20px;
            background-color: #0f79e2;
            margin-right: 8px;
          "
        ></span
        ><span>预售单库存</span>
      </div>
      <div class="search">
        <span>名称：</span>
        <el-input
            size="small"
            clearable
            style="width: 250px"
            v-model="params.productName"
            placeholder="请输入名称"
        ></el-input>
        <span>编码：</span>
        <el-input
            size="small"
            clearable
            style="width: 250px"
            v-model="params.productCode"
            placeholder="请输入编码"
        ></el-input>
        <span>所属仓库：</span>
        <el-select
            clearable
            v-model="params.area"
            size="small"
            style="width: 200px"
            placeholder="请选择"
        >
          <el-option
              v-for="item in warehouseList"
              :key="item.area"
              :label="item.areaName"
              :value="item.area"
          />
        </el-select>
        <span>选择日期：</span>
        <el-date-picker
            v-model="sateValue"
            type="daterange"
            range-separator="至"
            clearable
            size="small"
            @change="selectTime"
            style="width: 250px"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button
            size="small"
            type="primary"
            style="width: 80px; margin-left: 20px"
            @click="searchFn"
        >查询
        </el-button>
        <el-button
            size="small"
            style="width: 80px; margin-left: 20px"
            @click="reset"
        >重置
        </el-button>
      </div>
    </div>
    <div class="centerTable">
      <el-table
          :data="persaleData"
          border
          height="calc(100vh - 350px)"
          :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
          v-loading="loading"
          :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }"
      >
        <el-table-column prop="productName" label="单品名称"/>
        <el-table-column prop="productCode" label="编码"/>
        <el-table-column prop="area" label="仓库">
          <template slot-scope="scope">
            <div v-if="scope.row.area === 43"><span>宁乡壹</span></div>
            <div v-if="scope.row.area === 44"><span>广东仓</span></div>
            <div v-if="scope.row.area === 45"><span>广西仓</span></div>
            <div v-if="scope.row.area === 52"><span>贵州仓</span></div>
            <div v-if="scope.row.area === 53"><span>云南仓</span></div>
            <div v-if="scope.row.area === 56"><span>西安2仓</span></div>
            <div v-if="scope.row.area === 58"><span>山西仓</span></div>
          </template>
        </el-table-column>
        <el-table-column prop="productNum" label="数量"/>
        <el-table-column prop="stock" label="现有库存"/>
      </el-table>
      <el-pagination
          style="padding: 20px 0"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  name: "isPerSale",
  data() {
    return {
      warehouseList: [],
      persaleData: [],
      loading: false,
      sateValue: "",
      currentPage: 1,
      totalCount: 0,
      params: {
        startTime: "",
        endTime: "",
        productName: "",
        productCode: "",
        area: "",
        pageSize: 20,
        pageNumber: 1
      }
    }
  },
  created() {
    this.$api.areaLedgerAreaList().then(res => {
      this.warehouseList = res
    })
    this.getpersaleList()
  },
  methods: {
    selectTime(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.params.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    searchFn(){
      this.params.pageNumber=1
      this.getpersaleList()
    },
    getpersaleList() {
      const params = this.params
      this.$api.orderGetPerOrderList(params).then(res => {
        this.persaleData = res.data
        this.totalCount=res.total
      })
    },
    reset() {
      this.params = this.$options.data.call(this).params
      this.sateValue = ""
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getpersaleList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getpersaleList()
    }
  }
}
</script>

<style scoped lang="less">
.title {
  display: flex;
  margin-left: 20px;

  span {
    display: flex;
    margin-top: 20px;
  }
}

.topSearch {
  width: 100%;
  height: 110px;
  box-shadow: inset 0 20px 10px rgba(0, 128, 255, 0.2);
  border-bottom: 1px solid rgba(0, 128, 255, 0.08);

  .search {
    display: flex;
    align-items: center;
    margin-top: 15px;

    span {
      margin-left: 20px;
    }
  }
}
</style>